<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8" />
		<title>最强五子棋游戏登录页面</title>
		<style>
		.body_class{
			background-image: url(img/1.jpg);
			background-size: 100% 100%;
			height: 100%;
			display: flex;/* 设置盒子弹性模型*/
			flex-direction: row;/** 水平排列*/
			 align-items: center; /**纵向居中 */
			justify-content: center;/**横向居中 */
			
		}
		.main_div{
			height: 250px;
			width: 400px;
			background-color: bisque;
			border-radius: 10px;
			box-shadow: 10px 10px 10px #888888;
			display: flex;
			flex-direction: column;
			align-items: center;
			opacity: 0.7;
		}
		/* 标题样式 */
		.title_span{
			margin-top: 30px;
			font-size: 25px;
			font-family: "楷体";
			text-shadow: 5px 5px 5px black;
		}
		.item_div{
			margin-top: 15px;
		}
		.item_div3{
			margin-top: 15px;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.div_button{
			margin-top: 20px;
			border-radius: 10px;
		}
		
		</style>
		<script src="js/jquery.js"></script>
		<script>
		//页面加载时触发
		//全局变量
		var codeKey;
		$(function(){
			//生成一个随机数
			codeKey=Meth.random()*1000000;
			//生成验证码
			createCode();
		});
		//去注册页面
		function goRegisterPage(){
			window.location.href="register.html";
			
		}
		//忘记密码
		function forgetPassword(){
			location.href="forgetPassword.html";
		}
		function create_code(){
			$("#codeImg").attr("src","http://localhost:8080/user/code?codekey=" +codeKey+ "&time="+ new Date().getTime());
		}
		function login(){
			var username=$("#username").val();
			var password=$("#password").val();
			var code=$("#code").val();
			//前端校验
			if(username==null||username.trim()==""){
				alert("账号不能为空！");
				return;
			}
			if(password==null||password.trim()==""){
				alert("账号不能为空！");
				return;
			}
			//ajax发送后端
			$.ajax({
				type:"POST",
				url:"http://localhost:8080/user/login",
				data:{
					username:username,
					password:password,
					code:code,
					codeKey:codeKey
				},
				success: function(data){
					// alert(JSON.stringify(data))
					if(data){
						if(data.username=="-1"){
							alert("验证码错误");
							return;
						}
						alert("登录成功");
						//保存登录凭证(id/用户名，昵称，头像)
						localStorage.setItem("username",data.username);
						localStorage.setItem("nickname",data.nickname);
						localStorage.setItem("header",data.header);
						
						location.href="gamehome.html";
					}else{
						alert("登录失败");
					}
				}
			});
		}
		</script>
		
	</head>
	<body class="body_class">
		<!-- 登录注册 -->
	
		<div class="main_div">
			<span class="title_span">最强五子棋游戏登录页面</span>
			<div class="item_div">
				账号:<input id="username" placeholder="请输入用户名"/>
			</div>
			<div class="item_div">
				密码:<input id="password" type="password"  placeholder="请输入密码"/>
			</div>
			<div class="item_div3">
				验证码:<input id="code" style="width: 40px;" />
				<img src="http://localhost:8080/user/code" 
				id="codeImg"
				onclick="create_code()"
				 style="width: 70px;height: 40px;background-color: #000000;margin-left: 10px;"  />
			</div>
			<div class="div_button">
				<button onclick="login()">登录</button>
				<button onclick="goRegisterPage()">注册</button>
				<button  onclick="forgetPassword()">忘记密码</button>
			</div>
		</div>
	</body>
</html>
